<extend name='Public/demo' />

<block name='contents'>
    <div class="row">
            <aside class="profile-nav col-xs-12 col-lg-6" >
            <section class="wrapper tab-container ">
                              <section class="panel">
                                  <header class="panel-heading">
                                      用户年龄占比
                                        <p class="m-bot-none text-center pull-right">
                                          <span class="badge bg-primary" style='background:#F7464A'>未成年</span>
                                          <span class="badge bg-success" style='background:#46BFBD'>18-30</span>
                                          <span class="badge bg-info" style='background:#FDB45C'>30-40</span>
                                          <span class="badge bg-inverse" style='background:#949FB1'>40-50</span>
                                          <span class="badge bg-warning" style='background:#4D5360'>>60</span>
                                        </p>
                                  </header>
                                  <div class="panel-body text-center">
                                      <canvas id="age" height="300" width="400"></canvas>
                                  </div>
                              </section>
            </aside>
            <aside class="profile-nav col-xs-12 col-lg-6" >
            <section class="wrapper tab-container ">
                              <section class="panel">
                                  <header class="panel-heading">
                                      用户性别占比
                                      <p class="m-bot-none text-center pull-right">
                                        <span class="badge bg-primary" style='background:#F7464A'>男</span>
                                        <span class="badge bg-success" style='background:#46BFBD'>女</span>
                                      </p>
                                  </header>
                                  <div class="panel-body text-center">
                                      <canvas id="sex" height="300" width="400"></canvas>
                                  </div>
                              </section>
            </aside>
            <!-- more 模型已建好  -->
    </div>
</block>

<block name='data'>
<script type="text/javascript">
var Script = function () {


    var ageData = [
        {
            value: 20,
            color:"#F7464A",
        },
        {
            value : 20,
            color : "#46BFBD"
        },
        {
            value : 20,
            color : "#FDB45C"
        },
        {
            value : 20,
            color : "#949FB1"
        },
        {
            value : 20,
            color : "#4D5360"
        }

    ];
    var sexData = [
        {
            value: 40,
            color:"#F7464A",
        },
        {
            value : 60,
            color : "#46BFBD"
        }
    ];
    var lineChartData = {
        labels : ["","","","","","",""],
        datasets : [
            {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                data : [65,59,90,81,56,55,40]
            },
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [28,48,40,19,96,27,100]
            }
        ]

    };
    var pieData = [
        {
            value: 30,
            color:"#F38630"
        },
        {
            value : 50,
            color : "#E0E4CC"
        },
        {
            value : 100,
            color : "#69D2E7"
        }

    ];
    var barChartData = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,1)",
                data : [65,59,90,81,56,55,40]
            },
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                data : [28,48,40,19,96,27,100]
            }
        ]

    };
    var chartData = [
        {
            value : Math.random(),
            color: "#D97041"
        },
        {
            value : Math.random(),
            color: "#C7604C"
        },
        {
            value : Math.random(),
            color: "#21323D"
        },
        {
            value : Math.random(),
            color: "#9D9B7F"
        },
        {
            value : Math.random(),
            color: "#7D4F6D"
        },
        {
            value : Math.random(),
            color: "#584A5E"
        }
    ];
    var radarChartData = {
        labels : ["","","","","","",""],
        datasets : [
            {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                data : [65,59,90,81,56,55,40]
            },
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [28,48,40,19,96,27,100]
            }
        ]

    };
    new Chart(document.getElementById("age").getContext("2d")).Doughnut(ageData);
    new Chart(document.getElementById("sex").getContext("2d")).Doughnut(sexData);
    // new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
    // new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData);
    // new Chart(document.getElementById("polarArea").getContext("2d")).PolarArea(chartData);
    // new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
    // new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);


}();

</script>
</block>
